<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <%- include('component/head') %>
</head>
<body>
<div id="lzpper">
    <div id="fh5co-page ">




        <%- include('component/left_menu') %>

        <div id="fh5co-main">

            <!-- 轮播图 -->
            <aside id="fh5co-hero" class="js-fullheight">
                <div class="flexslider js-fullheight">
                    <ul class="slides">
                        <li v-for="item in shuffling" :key="shuffling.index"
                            :style="{ backgroundImage: 'url('+item.sh_img+')' }">
                            <div class="overlay"></div>
                            <div class="container-fluid">
                                <div class="row  justify-content-center">
                                    <div class="col-md-8 col-md-offset-2 text-center js-fullheight slider-text">
                                        <div class="slider-text-inner">
                                            <h1> {{ item.sh_title }} </h1>
                                            <p><a href="/blog.list"
                                                  class="btn btn-primary btn-learn">阅读本站博客<i
                                                            class="icon-arrow-right3"></i></a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
            </aside>

            <!-- 推荐博客 -->
            <div class="fh5co-narrow-content">
                <h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">推荐博客</h2>
                <div class="row">

                    <% if (ArticleRecList) { %>

                        <% ArticleRecList.forEach((item) => { %>
                            <div class="col-lg-5 col-md-12 col-padding animate-box recom-box">
                                <!-- left -->
                                <div class="left-box">
                                    <a href="/article/<%=item.id%>" class="blog-photo-a"><img src="<%= item.thumbnail %>"
                                                                          alt="<%= item.title %>"></a>
                                </div>
                                <!-- right -->
                                <div class="right-box">
                                    <!-- title -->
                                    <div style="width: 14.22375rem;">
                                        <div class="post-meta fix">
                                            <div class="post-date floatleft"><span
                                                        class="text-dark-red"><%= item.time.getDate() %></span>
                                            </div>
                                            <div class="post-year floatleft">
                                                <p class="text-uppercase text-dark-red mb-0"><%= item.time.toLocaleDateString() %></p>
                                                <h4 class="post-title"><a href="/article/<%=item.id%>" tabindex="0"><%= item.title %></a>
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 简介 -->
                                    <div class="introduc-box">
                                        <p><%= item.title %></p>
                                    </div>

                                    <!-- 阅读更多 -->
                                    <div class="lead-more"><a href="/article/<%=item.id%>">阅读更多 <i class="icon-arrow-right3"></i></a>
                                    </div>
                                </div>
                            </div>
                        <% }); %>
                    <% } %>
                </div>
            </div>

            <!-- 最近博客 -->
            <div class="fh5co-narrow-content">
                <h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">最近博客</h2>
                <div class="row row-bottom-padded-md">

                    <% if(ArticleNewList){ %>
                        <% ArticleNewList.forEach((item) => { %>
                            <div class="col-lg-3 col-md-6 col-sm-6 col-padding animate-box"
                                 data-animate-effect="fadeInLeft">
                                <div class="blog-entry">
                                    <a href="/article/<%=item.id%>" class="blog-img"><img src="<%= item.thumbnail %>" class="img-responsive"
                                                                      alt="<%= item.title %>"></a>
                                    <div class="desc">
                                        <h3><a href="/article/<%=item.id%>"><%= item.title %></a></h3>
                                        <span><small>by userName </small> / <small> category </small> / <small> <i
                                                        class="icon-eye"></i> <%= item.hits %></small></span>
                                        <p><%= item.title %></p>
                                        <a href="/article/<%=item.id%>" class="lead">阅读更多 <i class="icon-arrow-right3"></i></a>
                                    </div>
                                </div>
                            </div>
                        <% }); %>
                    <% } %>
                </div>
            </div>

            <!-- 标签 -->
            <div id="get-in-touch">
                <div class="fh5co-narrow-content">
                    <div class="row">
                        <div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
                            <h1 class="fh5co-heading-colored">标签</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3 col-md-pull-3 animate-box" data-animate-effect="fadeInLeft">
                        <% if(Labels) { %>
                            <% Labels.forEach((item) => { %>
                            <a style="margin-left: 5px" href="/label/<%= item.id %>"><span
                                        class="badge badge-warning"> <%= item.la_name %></span></a>
                            <% }); %>
                            <% } %>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 相册 -->
            <div class="fh5co-narrow-content">
                <h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">相册</h2>

                <section class="gallery no-padding animate-box">
                    <div class="row">
                        <div class="mix col-lg-3 col-md-3 col-sm-6" v-for="img in images" :key="img.index">
                            <div class="item">
                                <a :href="img.p_img" data-fancybox="gallery" class="image">
                                    <img :src="img.p_img" class="img-fluid">
                                    <div class="overlay align-items-center d-flex justify-content-center"
                                         style="font-size: 30px;">
                                        <i class="icon-search3"></i>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>
            </div>


        </div>
    </div>


</div>

<%- include('component/vue') %>

</body>
</html>
